@charset "utf-8";


/*------------------------------*/
/*          function            */
/*------------------------------*/
@function rem($px) {
    @return ($px / 100) * 1rem;
}

/*  不需要随屏幕变化的 2倍图 除以2  */
@function half($px) {
    @return ($px/2) * 1px;
}

/*------------------------------*/
/*              class           */
/*------------------------------*/
/*  img_processing  */
.img_processing{
    width: 100%;
    height:100%;
}
/*  title_icon + title_text */
.title_area{
    width: rem(221);
    height: inherit;
    box-sizing: border-box;
    padding-left: rem(21);
    padding-top: rem(35); 
}
.title_icon{
    width: rem(57);
    height: rem(53);
    vertical-align: bottom;
}
.title_text{
    font-size: rem(30);
    font-family: "Microsoft YaHei", "Microsoft YaHei UI", "微软雅黑", Arial,Helvetica, Tahoma, STXihei, "华文细黑",SimSun, "宋体", Heiti, "黑体", sans-serif;
    color: black;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  for_more    */
.for_more{
    width: rem(130);
    height: rem(93);
    box-sizing: border-box;
    padding-top: rem(44);
    padding-right: rem(21);
    p{
        @extend .title_text;
        font-size: rem(24);
        // line-height: rem(25);
        vertical-align: bottom;
    }
    .for_more_icon{
        margin-top: rem(7.5);
        width: rem(25);
        height: rem(25);
        margin-left: rem(8);
        vertical-align: bottom;
    }
}

/*-------------------------------*/
/*              layout           */
/*-------------------------------*/
header {
    position: fixed;
    width: 100%;
    height: half(150);
    top: 0;
    padding: half(17) half(23) half(10);

    .logo {
        width: half(123);
        height: half(123);
        font-size: 0;

        // overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .cityBar {
        width: half(157);
        height: half(54);
        border: 1px solid #ff9344;
        font-size: 0;
        margin-top: half(30);

        select {
            width: 100%;
            height: 100%;
            // 去除默认样式
            -webkit-appearance: none;
            appearance: none;
            border: 0;
            border-radius: 0;
            padding-left: 14px;
            background-image: url("../img/jiantou.png");
            background-repeat: no-repeat;
            background-position: right 5px center;
            background-size: half(30) half(16);
        }

        option {
            width: 100%;
        }
    }

    .searchBar {
        margin: half(24) auto 0;
        width: rem(264);
        height: half(50);
        border: 1px solid #ff9344;
        border-radius: half(50);
        font-size: 0;
        overflow: hidden;

        input[type="image"] {
            width: half(37);
            height: half(35);
            vertical-align: middle;
        }

        input[type="text"] {
            width: calc(100% - 28.5px);
            border: none;
            text-indent: half(26);
            height: 100%;
            vertical-align: middle;
        }
    }
}

footer {
    position: fixed;
    // half(750)
    width: 100%;
    height: half(136);
    bottom: 0;
    padding: half(21) rem(50) half(14) rem(47);
    font-size: 0;

    .menu {
        width: rem(653);
        background-color: #fff;
        text-align: justify;

        &::after {
            content: "";
            display: inline-block;
            width: 100%;
        }

        .menu_area {
            display: inline-block;
            vertical-align: top;
            width: rem(72);
            height: inherit;

            .menu_img {
                margin: 0 auto;
                width: half(72);
                height: half(72);
                overflow: hidden;
            }

            p {
                font-size: half(26);
                font-family: "Microsoft YaHei", "Microsoft YaHei UI", "微软雅黑", Arial,Helvetica, Tahoma, STXihei, "华文细黑",SimSun, "宋体", Heiti, "黑体", sans-serif;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: black;
            }
        }
    }
}

#main {
    position: fixed;
    top: half(150);
    bottom: half(136);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    // background-color: skyblue;

}